<template>
  <view class="box cer">
    <view class="box-title">资格证书</view>
    <view>
      <text class="cer-item" v-for="cerItem in personCerArr" :key="cerItem.id">{{cerItem.CertName}}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    personCerArr: {
      type: Array,
      default: () => [],
    }
  }
}
</script>

<style lang="scss" scoped>
$img-base-resume: $img-base + "resume/";
.item-title {
  margin-bottom: $uni-spacing-col-lg;
  font-size: $uni-font-size-base;
  font-weight: bold;
  color: $uni-text-color-333;
}
.box {
  margin-bottom: $uni-spacing-col-big;
  padding: $uni-spacing-col-big;
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  &-title {
    margin-bottom: $uni-spacing-col-lg;
    font-size: $uni-font-size-lg;
    font-weight: bold;
    color: #333333;
  }
}
.cer {
  &-item {
    display: inline-block;
    margin-bottom: 10rpx;
    margin-right: 16rpx;
    padding: 5rpx 16rpx;
    color: $uni-text-color-999;
    background-color: #EDEDF1;
    border-radius: $uni-border-radius-sm;
  }
}
</style>